{include file="start" /}
{include file="end" /}
<title>重卡汇</title>
<link rel="stylesheet" href="/_hongyanche/css/app.css">

<style>
     #mask {
        background-color: #ccc;
        opacity: 0.5;
        filter: alpha(opacity=50);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1000;
    }
    #login {
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 1001;
        background: white;
        overflow: auto;
    }
    #login #close {
        z-index: 99999;
    }
    .car-info-wrap {
        position: fixed;
        width: 100%;
        height: 100%;
        background: #fff;
    }

    .car-info-wrap .car-info-header {
        padding: 5px;
        text-align: center;
        font-size: 1.3rem;
        font-weight: 600;
        background: cadetblue;
        color: #fff;
    }

    .car-info-wrap .car-list {
        margin-top: 0;
    }

    .car-info-wrap .car-list .line {
        border-bottom: 1px solid #ddd;
    }
    .line-box{
        display: inline-block;
    }
</style>

<div class="car-info-wrap">
    <div class="car-info-header">
        <span style="float:left;" id="back"><</span> 我的车辆列表
    </div>
    <a id="add-btn" class=" weui-btn weui-btn_mini weui-btn_plain-primary">添加车辆</a>
    <div id="car-list-wrap" class="car-list weui-cells">
        <!-- <div class="car-item weui-cell line">
            <div class=" weui-cell__bd">车牌号:渝A12345</div>
            <a href="/home/carinfo_panel" class="btn weui-btn_primary weui-btn_mini">查看详情</a>
        </div>
        <div class="car-item weui-cell line">
            <div class=" weui-cell__bd">车牌号:渝A12345</div>
            <a href="javascript:void(0)" class="btn weui-btn_primary weui-btn_mini">查看详情</a>
        </div>
        <div class="car-item weui-cell line">
            <div class=" weui-cell__bd">车牌号:渝A12345</div>
            <a href="javascript:void(0)" class="btn weui-btn_primary weui-btn_mini">查看详情</a>
        </div>
        <div class="car-item weui-cell line">
            <div class=" weui-cell__bd">车牌号:渝A12345</div>
            <a href="javascript:void(0)" class="btn weui-btn_primary weui-btn_mini">查看详情</a>
        </div> -->
    </div>
</div>

<script>
     function openNew() {
        //获取页面的高度和宽度
        var sWidth=document.body.scrollWidth;
        var sHeight=document.body.scrollHeight;
        //获取页面的可视区域高度和宽度
        var wHeight=document.documentElement.clientHeight;
        var oMask=document.createElement("div");
        oMask.id="mask";
        oMask.style.height=sHeight+"px";
        oMask.style.width=sWidth+"px";
        document.body.appendChild(oMask);
        var oLogin=document.createElement("div");
        oLogin.id="login";
        oLogin.innerHTML="<div class='loginCon'><div id='close' style='position: absolute; right: 0; top: 0;'><i class='weui-icon weui-icon-cancel weui-icon-original' style='font-size: 25px;'></i></div></div>";
        document.body.appendChild(oLogin);
        //获取登陆框的宽和高
        var dHeight=oLogin.offsetHeight;
        var dWidth=oLogin.offsetWidth;
        //设置登陆框的left和top
        oLogin.style.left=sWidth/2-dWidth/2+"px";
        oLogin.style.top=wHeight/2-dHeight/2+"px";
        //点击关闭按钮
        // var oClose=document.getElementById("close");
        // //点击登陆框以外的区域也可以关闭登陆框
        // oClose.onclick=oMask.onclick=function(){
        //     alert(1);
        //     document.body.removeChild(oLogin);
        //     document.body.removeChild(oMask);
        // };
    }
    // 返回上一页
    $('body').on('click', '#back', function(){
        window.history.back();
    });
    function PageInit(){
        $.ajax({
            url: '/maintain/vehicle_list',
            type: 'GET',
            xhrFields:{
                withCredentials:true
            },
            success: function(data) {
                if(data.state) {
                    var datas = data.data.list;
                    datas.forEach(function(item){
                        var vin = item.vin;
                        $('#car-list-wrap').append(`
                        <div class="car-item weui-cell line">
                            <div class=" weui-cell__bd">车牌号:${item.vehicle_license_province} ${item.vehicle_license_number}</div>
                            <a href="/home/carinfo_panel?vin=${vin}&id=${item.vehicle_license_province + item.vehicle_license_number}&vehicle_brand=${item.vehicle_brand}" class="btn weui-btn_primary weui-btn_mini">查看详情</a>
                        </div>
                        `);
                    });
                } else {
                    return TOAST.wran('网络错误', ' ', 1);
                }
            }
        })
    };
    (function () {
        PageInit();
        // 模态框内容
        function createModalHtml() {
            $('#login').append(`
                    <div id="addcar" style="display:block;">
                <div class='weui-cells weui-cells__radius' style="margin: 0; font-size:14px;">
                    <div class='weui-cell'>
                        <div class='weui-cell__hd'>
                            <label class='weui-label'>vin</label>
                        </div>
                        <div class='weui-cell__bd'>
                            <input class='vehicle-create weui-input' info=1 name='vin' placeholder="请输入vin号" />
                        </div>
                    </div>
                    <div class='weui-cell'>
                        <div class='weui-cell__hd'>
                            <label class='weui-label'>角色</label>
                        </div>
                        <label href="javascript: void(0)">
                            <div class='weui-cell__bd'>
                                <input type="radio" class="weui-check vehicle-create" name="role" value="1">
                                <i class="weui-icon weui-icon-checked"></i>使用者
                            </div>
                        </label>
                        <label>
                            <div class='weui-cell__bd'>
                                <input type="radio" class="weui-check vehicle-create" name="role" value="2">
                                <i class="weui-icon weui-icon-checked"></i>拥有者
                            </div>
                        </label>
                    </div>
                    <div class='weui-cell'>
                        <div class='weui-cell__hd'>
                            <label class='weui-label'>姓名</label>
                        </div>
                        <div class='weui-cell__bd'>
                            <input class='vehicle-create weui-input' info=1 name='uname' placeholder="请输入姓名" />
                        </div>
                    </div>
                    <div class='weui-cell weui-flex'>
                        <div class=" weui-flex__item">
                                <div class='line-box'>
                            <label class='weui-label'>车辆所属</label>
                        </div>
                        <div class='line-box'>
                            <select class='vehicle-create weui-select' in1fo=1 name='vehicle_license_province'>
                                <option value=''>省</option>
                                <option>京</option>
                                <option>津</option>
                                <option>沪</option>
                                <option>渝</option>
                                <option>冀</option>
                                <option>晋</option>
                                <option>辽</option>
                                <option>吉</option>
                                <option>黑</option>
                                <option>苏</option>
                                <option>浙</option>
                                <option>皖</option>
                                <option>闽</option>
                                <option>赣</option>
                                <option>鲁</option>
                                <option>豫</option>
                                <option>鄂</option>
                                <option>湘</option>
                                <option>粤</option>
                                <option>琼</option>
                                <option>川</option>
                                <option>贵</option>
                                <option>云</option>
                                <option>陕</option>
                                <option>甘</option>
                                <option>青</option>
                                <option>藏</option>
                                <option>桂</option>
                                <option>蒙</option>
                                <option>宁</option>
                                <option>新</option>
                            </select>
                        </div>
                        </div>
                        <div class=' weui-flex__item'>
                            <div class='line-box'>
                                <label class='weui-label'>车牌号码</label>
                            </div>
                            <div class='line-box'>
                                <input class='vehicle-create weui-input' in1fo=1 name='vehicle_license_number' placeholder="请输入车牌号码" />
                            </div>
                        </div>
                    </div>

                    <div class='weui-cell weui-cell_select'>
                        <div class='weui-cell__hd'>
                            <label class='weui-label'>车辆品牌</label>
                        </div>
                        <div class='weui-cell__bd'>
                            <select class='vehicle-create weui-select' info=1 name='vehicle_brand'>
                                <option value=''>请输入车辆品牌</option>
                                <option>上汽红岩</option>
                                <option>一汽解放</option>
                                <option>中国重汽</option>
                                <option>福田欧曼</option>
                                <option>东风商用车</option>
                                <option>陕汽重卡</option>
                                <option>华菱重卡</option>
                                <option>北奔重卡</option>
                                <option>联合卡车</option>
                            </select>
                        </div>
                    </div>
                    <div class="weui-cell">
                        <a href="javascript:void(0)" class=" weui-btn weui-btn_mini weui-btn_primary" id="add">添加</a>
                    </div>
                </div>
            </div>
            `)
        };
        $('body').on('click', '#close', function(){
            $('#mask').remove();
            $('#login').remove();
        });
        $('body').on('click', '#add-btn', function () {
            openNew();
            createModalHtml();
        });
        $('body').on('click', '#add', function() {
            POST.init('#add', {
            text: "添加",
            url: '/maintain/vehicle_create',
            input: function () {
                var r = {};
                $('.vehicle-create').each(function (index, el) {
                    if ($(el).attr('type') == 'radio') {
                        if (el.checked) {
                            r[$(el).attr('name')] = $   (el).val();
                        }
                    }
                    r[$(el).attr('name')] = $(el).val();
                });
                return r;
            },
            success: function () {
                $('#mask').remove();
                $('#login').remove();
                window.location.reload();
            }
        });
        })
    })();
</script>